<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="1">
				<span class="queryLabel">月份:</span>
			</el-col>
			<el-col :span="4">
				<el-date-picker size="small" v-model="queryData.month" type="month"></el-date-picker>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">区域:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="queryData.area" placeholder="请选择区域" clearable @change="getCompanyInfo">
					<el-option v-for="item in areaCombo" :label="item.label" :value="item.code"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">品牌:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="queryData.brand" placeholder="请输入品牌名称" clearable @change="getCompanyInfo">
					<el-option v-for="item in brandCombo" :label="item.label" :value="item.code"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">公司:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="queryData.companyId" placeholder="请输入公司名称" clearable>
					<el-option v-for="item in companyCombo" :label="item.oName" :value="item.id"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" :offset="1" style="padding-left: 0px;">
				<el-button type="primary" size="small" v-on:click='query' v-if="detailShow == false">查询</el-button>
			</el-col>
			<el-col :span="1" :offset="1" style="padding-left: 0px;">
				<el-button type="primary" size="small" v-on:click='back' v-if="detailShow == true">返回</el-button>
			</el-col>
		</el-row>
		<el-row :gutter="24" v-if="detailShow == false">
			<div class="report_Fixedwidth" v-loading="fullscreenloading">
				<table class="report_table" cellspacing="0" id="process" cellpadding="0" width="1950px">
					<tbody>
						<tr class="texttbody">
							<th scope="col" rowspan="2" style="width: 200px;">公司</th>
							<th scope="col" rowspan="2" style="width: 100px;">客户经理</th>
							<td colspan="3">今日任务</td>
							<td colspan="9">本月全部任务</td>
							<td colspan="9">本月已完成任务</td>
							<td colspan="1" rowspan="2" style="width: 90px">过期任务</td>
						</tr>
						<tr class="texttbody">
							<td style="width: 40px">总数</td>
							<td style="width: 40px;">已完成</td>
							<td style="width: 40px">关闭</td>
							<td style="width: 90px">次年交强险</td>
							<td style="width: 90px">次年商业险</td>
							<td style="width: 90px">交强险续保</td>
							<td style="width: 90px">商业险续保</td>
							<td style="width: 90px">保险活跃</td>
							<td style="width: 90px">保险非活跃</td>
							<td style="width: 90px">交强险接待</td>
							<td style="width: 90px">商业险接待</td>
							<td style="width: 90px">总计</td>
							<td style="width: 90px">次年交强险</td>
							<td style="width: 90px">次年商业险</td>
							<td style="width: 90px">交强险续保</td>
							<td style="width: 90px">商业险续保</td>
							<td style="width: 90px">保险活跃</td>
							<td style="width: 90px">保险非活跃</td>
							<td style="width: 90px">交强险接待</td>
							<td style="width: 90px">商业险接待</td>
							<td style="width: 90px">总计</td>
						</tr>
						<tr v-for="item in tableDataList">
							<td>{{item.oName}}</td>
							<td>{{item.uName}}</td>
							<td>
								<div v-if="item.totalDay != '0'">
									<el-button type="text" @click="detailQuery(item,'totalDay')">{{item.totalDay}}</el-button>
								</div>
								<div v-if="item.totalDay == '0'">
									{{item.totalDay}}
								</div>
							</td>
							<td>
								<div v-if="item.doneDay != '0'">
									<el-button type="text" @click="detailQuery(item,'doneDay')">{{item.doneDay}}</el-button>
								</div>
								<div v-if="item.doneDay == '0'">
									{{item.doneDay}}
								</div>
							</td>
							<td>
								<div v-if="item.closeDay != '0'">
									<el-button type="text" @click="detailQuery(item,'closeDay')">{{item.closeDay}}</el-button>
								</div>
								<div v-if="item.closeDay == '0'">
									{{item.closeDay}}
								</div>
							</td>
							<td>
								<div v-if="item.cnjMonth != '0'">
									<el-button type="text" @click="detailQuery(item,'cnjMonth')">{{item.cnjMonth}}</el-button>
								</div>
								<div v-if="item.cnjMonth == '0'">
									{{item.cnjMonth}}
								</div>
							</td>
							<td>
								<div v-if="item.cnsMonth != '0'">
									<el-button type="text" @click="detailQuery(item,'cnsMonth')">{{item.cnsMonth}}</el-button>
								</div>
								<div v-if="item.cnsMonth == '0'">
									{{item.cnsMonth}}
								</div>
							</td>
							<td>
								<div v-if="item.xbjMonth != '0'">
									<el-button type="text" @click="detailQuery(item,'xbjMonth')">{{item.xbjMonth}}</el-button>
								</div>
								<div v-if="item.xbjMonth == '0'">
									{{item.xbjMonth}}
								</div>
							</td>
							<td>
								<div v-if="item.xbsMonth != '0'">
									<el-button type="text" @click="detailQuery(item,'xbsMonth')">{{item.xbsMonth}}</el-button>
								</div>
								<div v-if="item.xbsMonth == '0'">
									{{item.xbsMonth}}
								</div>
							</td>
							<td>
								<div v-if="item.hytMonth != '0'">
									<el-button type="text" @click="detailQuery(item,'hytMonth')">{{item.hytMonth}}</el-button>
								</div>
								<div v-if="item.hytMonth == '0'">
									{{item.hytMonth}}
								</div>
							</td>
							<td>
								<div v-if="item.fhytMonth != '0'">
									<el-button type="text" @click="detailQuery(item,'fhytMonth')">{{item.fhytMonth}}</el-button>
								</div>
								<div v-if="item.fhytMonth == '0'">
									{{item.fhytMonth}}
								</div>
							</td>
							<td>
								<div v-if="item.jdjMonth != '0'">
									<el-button type="text" @click="detailQuery(item,'jdjMonth')">{{item.jdjMonth}}</el-button>
								</div>
								<div v-if="item.jdjMonth == '0'">
									{{item.jdjMonth}}
								</div>
							</td>
							<td>
								<div v-if="item.jdsMonth != '0'">
									<el-button type="text" @click="detailQuery(item,'jdsMonth')">{{item.jdsMonth}}</el-button>
								</div>
								<div v-if="item.jdsMonth == '0'">
									{{item.jdsMonth}}
								</div>
							</td>
							<td>
								<div v-if="item.totalMonth != '0'">
									<el-button type="text" @click="detailQuery(item,'totalMonth')">{{item.totalMonth}}</el-button>
								</div>
								<div v-if="item.totalMonth == '0'">
									{{item.totalMonth}}
								</div>
							</td>
							<td>
								<div v-if="item.cnjMonthDone != '0'">
									<el-button type="text" @click="detailQuery(item,'cnjMonthDone')">{{item.cnjMonthDone}}</el-button>
								</div>
								<div v-if="item.cnjMonthDone == '0'">
									{{item.cnjMonthDone}}
								</div>
							</td>
							<td>
								<div v-if="item.cnsMonthDone != '0'">
									<el-button type="text" @click="detailQuery(item,'cnsMonthDone')">{{item.cnsMonthDone}}</el-button>
								</div>
								<div v-if="item.cnsMonthDone == '0'">
									{{item.cnsMonthDone}}
								</div>
							</td>
							<td>
								<div v-if="item.xbjMonthDone != '0'">
									<el-button type="text" @click="detailQuery(item,'xbjMonthDone')">{{item.xbjMonthDone}}</el-button>
								</div>
								<div v-if="item.xbjMonthDone == '0'">
									{{item.xbjMonthDone}}
								</div>
							</td>
							<td>
								<div v-if="item.xbsMonthDone != '0'">
									<el-button type="text" @click="detailQuery(item,'xbsMonthDone')">{{item.xbsMonthDone}}</el-button>
								</div>
								<div v-if="item.xbsMonthDone == '0'">
									{{item.xbsMonthDone}}
								</div>
							</td>
							<td>
								<div v-if="item.hytMonthDone != '0'">
									<el-button type="text" @click="detailQuery(item,'hytMonthDone')">{{item.hytMonthDone}}</el-button>
								</div>
								<div v-if="item.hytMonthDone == '0'">
									{{item.hytMonthDone}}
								</div>
							</td>
							<td>
								<div v-if="item.fhytMonthDone != '0'">
									<el-button type="text" @click="detailQuery(item,'fhytMonthDone')">{{item.fhytMonthDone}}</el-button>
								</div>
								<div v-if="item.fhytMonthDone == '0'">
									{{item.fhytMonthDone}}
								</div>
							</td>
							<td>
								<div v-if="item.jdjMonthDone != '0'">
									<el-button type="text" @click="detailQuery(item,'jdjMonthDone')">{{item.jdjMonthDone}}</el-button>
								</div>
								<div v-if="item.jdjMonthDone == '0'">
									{{item.jdjMonthDone}}
								</div>
							</td>
							<td>
								<div v-if="item.jdsMonthDone != '0'">
									<el-button type="text" @click="detailQuery(item,'jdsMonthDone')">{{item.jdsMonthDone}}</el-button>
								</div>
								<div v-if="item.jdsMonthDone == '0'">
									{{item.jdsMonthDone}}
								</div>
							</td>
							<td>
								<div v-if="item.totalMonthDone != '0'">
									<el-button type="text" @click="detailQuery(item,'totalMonthDone')">{{item.totalMonthDone}}</el-button>
								</div>
								<div v-if="item.totalMonthDone == '0'">
									{{item.totalMonthDone}}
								</div>
							</td>
							<td>
								<div v-if="item.overdueTask != '0'">
									<el-button type="text" @click="detailQuery(item,'overdueTask')">{{item.overdueTask}}</el-button>
								</div>
								<div v-if="item.overdueTask == '0'">
									{{item.overdueTask}}
								</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</el-row>
		<el-row v-if="detailShow == true">
			<el-col :span="24">
				<el-table :data="taskTableData.dataList" border v-loading="detailLoading">
					<el-table-column label="类别" width="100" prop="typeCode" :formatter="typeCodeCov">
					</el-table-column>
					<el-table-column label="日期" align="center" width="150">
						<template scope="scope">
							{{scope.row.expectDate}}
						</template>
					</el-table-column>
					<el-table-column prop="dealDate" label="任务完成时间" width="150">
					</el-table-column>
					<el-table-column prop="vin" label="车架号" width="240">
					</el-table-column>
					<el-table-column prop="plateNum" label="车牌号" width="140">
					</el-table-column>
					<el-table-column prop="content" label="任务标题">
					</el-table-column>
					<el-table-column prop="status" label="任务状态" width="200" :formatter="statusFor">
					</el-table-column>
					<el-table-column label="处理人" width="80" :formatter="uNameCov">
					</el-table-column>
				</el-table>
				<el-pagination small @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="taskTableData.total">
				</el-pagination>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				detailLoading: false,
				detailShow: false,
				queryData: { //查询条件
					month: '', //统计月份
					area: '', //区域
					brand: '', //品牌
					companyId: '', //公司
				},
				areaCombo: [], //区域
				brandCombo: [], //品牌
				companyCombo: [], //公司
				tableDataList: [], //表格数据
				fullscreenloading: false, //等待框
				page: this.page,
				CurentPage: 1,
				taskTableData: {
					total: 0,
					dataList: []
				},
				itemData:{},//明细分页查询暂存数据
				type:"",//明细分页查询暂存类型
				dealName:'',//处理人
			}
		},
		methods: {
			query: function() {
				debugger;
				if(this.$data.queryData.month == "" || this.$data.queryData.month == null) {
					this.$data.queryData.month = new Date();
				}
				if(this.$data.queryData.companyId == "") {
					this.$message.error("请选择公司！");
				} else {
					this.$data.fullscreenloading = true;
					this.$data.queryData.month = this.moment(this.$data.queryData.month).format("YYYY-MM");
					this.$http.get(this.API_ROOT + "/crm/kpi/insuranceTsakQuery", {
						params: {
							month: this.$data.queryData.month,
							area: this.$data.queryData.area,
							brand: this.$data.queryData.brand,
							companyId: this.$data.queryData.companyId
						}
					}).then(resp => {
						debugger;
						if(resp.data.success) {
							this.$data.tableDataList = resp.data.dataList;
							this.$message(resp.data.msg);
						} else {
							this.$message.error(resp.data.msg);
						}
						this.$data.fullscreenloading = false;
					});
				}
			},
			//任务明细查询
			detailQuery: function(item, type) {
				debugger;
				this.$data.itemData = item;
				this.$data.type = type;
				this.$data.dealName = item.uName;
				this.$data.detailLoading = true;
				this.$http.get(this.API_ROOT + "/crm/kpi/insuranceTaskDetail", {
					params: {
						type: this.$data.type,
						companyId: this.$data.itemData.companyId,
						saId: this.$data.itemData.saId,
						time: this.$data.itemData.month,
						limit: this.page.pageSize,
						start: this.$data.CurentPage
					}
				}).then(resp => {
					debugger;
					if(resp.data.success) {
						this.$data.detailShow = true;
						this.$data.taskTableData.total = parseInt(resp.data.total);
						this.$data.taskTableData.dataList = resp.data.dataList;
						this.$message(resp.data.msg);
					} else {
						this.$message.error(resp.data.msg);
					}
					this.$data.detailLoading = false;
				});
			},
			//返回按钮
			back: function(){
				this.$data.detailShow = false;
				this.$data.CurentPage = 1;
				this.$data.dealName ="";
			},
			//分页
			handleCurrentChange: function(page) {
				//debugger;
				this.$data.CurentPage = page;
				this.detailQuery(this.$data.itemData,this.$data.type);
			},
			//获取公司信息
			getCompanyInfo: function() {
				//this.$data.data.companyId = ""; //清空单位
				this.$data.queryData.companyId = ""; //清空单位
				this.$data.companyCombo = [];
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/all", {
					params: {
						area: this.$data.area,
						brand: this.$data.brand
					}
				}).then(resp => {
					this.$data.companyCombo = resp.data.dataList;
					if(this.$data.companyCombo.length > 0) {
						this.$data.queryData.companyId = this.$data.companyCombo[0].id;
					}
				});
			},
			//获取区域
			getarea: function() {

				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/area/all", {
					params: {

					}
				}).then(resp => {
					this.$data.areaCombo = resp.data.dataList;
				});
			},
			//获取品牌
			getBrand: function() {
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/brand/all", {
					params: {}
				}).then(resp => {
					this.$data.brandCombo = resp.data.dataList;
				});
			},

			//任务状态转换
			statusFor: function(row, column) {
				if(row.status == 1) {
					return "已完成";
				} else if(row.status == 2) {
					return "已关闭";
				} else {
					if(
						row.expectDate <
						this.moment(new Date().toISOString()).format("YYYY-MM-DD")
					) {
						return "任务已过期";
					} else {
						return row.statusName;
					}
				}
			},
			//处理人
			uNameCov:function(row , column){
				return this.$data.dealName;
			},
			typeCodeCov: function(row, column) {
				switch(row.typeCode) {
					case "cnj":
						return "次年交强险";
						break;
					case "cns":
						return "次年商业险";
						break;
					case "xbj":
						return "交强险续保";
						break;
					case "xbs":
						return "商业险续保";
						break;
					case "hyt":
						return "保险活跃";
						break;
					case "fhyt":
						return "保险非活跃";
						break;
					case "jdj":
						return "交强险接待";
						break;
					case "jds":
						return "商业险接单";
						break;
					default:
						return "";
						break;
				}
			},
		},
		created: function() {
			this.getarea();
			this.getBrand();
			this.getCompanyInfo();
		}
	}
</script>

<style>

</style>